<template>
    <div class="all">

        <div class="table">
            <div class="title" v-if="this.value == '1'">
                未维修设备列表
            </div>
            <div class="title" v-if="this.value == '0'">
                已维修设备列表
            </div>
            <div>
                <span>
                    <el-button type="primary" style="margin-bottom: 2px;" @click="change()">切换信息</el-button>
                </span>
                <span>
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="params.page" :page-sizes="[10, 20, 30, 40, 50]" :page-size="params.page_size"
                        layout="total, sizes, prev, pager, next, jumper" :total="total">
                    </el-pagination>
                </span>
            </div>


            <div>
                <el-input placeholder="请输入编号、上报人、维修情况" @change="get_data()" prefix-icon="el-icon-search"
                    v-model="params.search">
                </el-input>
            </div>



            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="number" label="机器编号">
                </el-table-column>
                <el-table-column prop="description" label="故障概要">
                </el-table-column>
                <el-table-column prop="person_record" label="上报人">
                </el-table-column>
                <el-table-column prop="person_finish" label="修理情况">
                </el-table-column>
                <el-table-column fixed="right" label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="dialogFormVisible = true; taskForm = scope.row"
                            v-if="value == '1'">维修</el-button>
                        <el-button type="text" @click="dialogVisible = true"></el-button>
                    </template>
                </el-table-column>

            </el-table>
        </div>
        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <span>建议与2023年2月15号安排检修任务。</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="编辑故障信息" :visible.sync="dialogFormVisible">
            <el-form :model="taskForm" status-icon ref="informationForm" label-width="100px" class="demo-informationForm">
                <el-form-item label="信息id" prop="id">
                    <el-input type="text" v-model="taskForm.id" autocomplete="off" disabled></el-input>
                </el-form-item>
                <el-form-item label="地区" prop="area">
                    <el-input type="text" v-model="taskForm.area" autocomplete="off" disabled></el-input>
                </el-form-item>

                <el-form-item label="故障概要" prop="description">
                    <el-input type="text" v-model="taskForm.description" autocomplete="off" disabled></el-input>
                </el-form-item>

                <el-form-item label="上报人" prop="person_record">
                    <el-input type="text" v-model="taskForm.person_record" autocomplete="off" disabled></el-input>
                </el-form-item>

                <el-form-item label="维修人" prop="person_finish">
                    <el-input type="text" v-model="taskForm.person_finish" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-radio v-model="taskForm.is_fix" :label=true>修好了</el-radio>
                    <el-radio v-model="taskForm.is_fix" :label=false>未修好</el-radio>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="updateTask(); dialogFormVisible = false">提交</el-button>
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                </el-form-item>




            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { getTaskList, getTaskList2, updateTask } from '@/api/table';
export default {

    mounted() {
        this.get_data()
    },

    methods: {

        get_data() {
            if (this.value == '1') {
                getTaskList(this.params).then(response => {
                    this.tableData = response.data.results
                    this.total = response.data.count
                    this.$message({
                        showClose: true,
                        message: '切换成功！',
                        type: 'success'
                    });
                })
            } else {
                getTaskList2(this.params).then(response => {
                    this.tableData = response.data.results
                    this.total = response.data.count
                    this.$message({
                        showClose: true,
                        message: '切换成功！',
                        type: 'success',
                    });
                })
            }
        },



        handleSizeChange(page_size) {

            this.params.page_size = page_size;
            this.get_data();
        },
        handleCurrentChange(page) {

            this.params.page = page;
            this.get_data();
        },


        handleClick(row) {

        },

        change() {
            if (this.value == '0')
                this.value = '1'
            else
                this.value = '0'
            this.get_data();
        },




        updateTask(id) {
            var id = this.taskForm.id
            updateTask(id, this.taskForm).then(response => {
                getTaskList().then(response => {
                    this.tableData = response.data.results
                })
            })
        },

        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
    },

    data() {
        return {
            tableData: [],
            value: '1',
            taskForm: {
                id: '',
                number: '',
                description: '',
                person_record: '',
                person_finish: '',
                is_fix: '',
            },
            dialogFormVisible: false,
            params: {
                'page': 1,
                'page_size': 10,
                'search': '',
            },
            total: 0,
            dialogVisible: false
        }
    }
}
</script>

<style scoped>
.table {
    margin-top: 3%;
    width: 80%;
    margin-left: 10%;
}

body {
    background-color: rgb(241, 243, 243);

}

.title {
    text-align: center;
    color: rgb(65, 66, 66);
    font-weight: bolder;
    font-size: 300%;
    font-family: "KaiTi";
    border-bottom: 1px solid rgb(80, 80, 80);
}

.all {
    background-color: rgb(241, 243, 243);
    min-height: 94.8vh;
    padding-top: 2%;
}
</style>